<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定位置的导航</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            height: 200px;
            background-color: yellowgreen;
        }
        #nav{
            width: 100%;
            height: 80px;
            background-color: lemonchiffon;

        }
        #main{
            font-size: 30px;
        }
        .fixed {
            position: fixed;
            top:20px;
        }
    </style>
</head>
<body>
<h1>aa</h1>
<h1>aa</h1>
<h1>aa</h1>
<h1>aa</h1>
<h1>aa</h1>
<div id="main">
        <div id="box">
            这是网页顶部
            <div id="nav"  >
                这是导航栏
            </div>
        </div>

          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
          <div>这是网页内容</div>
        </div>
    <script>
     var mainobj = document.getElementById('main');
        var navobj = document.getElementById('nav');
      window.onscroll = function () {
          console.log(mainobj.offsetTop);
          console.log(document.body.scrollTop);
          if(document.body.scrollTop>=mainobj.offsetTop){
              nav.className='fixed'
          }else {
              nav.className=''
          }
      };


    </script>

</body>
</html>